<template>
  <div class="home">
      <HomeHeader></HomeHeader>
      <HomeSwiper :list="swiperList"></HomeSwiper>
      <HomeIcons :list="iconList"></HomeIcons>
      <HomeRecommed :list="recommendList"></HomeRecommed>
      <HomeWeekend :list="weekendList"></HomeWeekend>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeHeader from '@/components/home/Header.vue'
import HomeSwiper from '@/components/home/Swiper.vue'
import HomeIcons from '@/components/home/Icons.vue'
import HomeRecommend from '@/components/home/Recommend.vue'
import HomeWeekend from '@/components/home/Weekend.vue'
import axios from 'axios'
import {mapState} from 'vuex'

export default {
  name: 'Home',
  components: {
      HomeHeader: HomeHeader,
      HomeSwiper: HomeSwiper,
      HomeIcons:HomeIcons,
      HomeRecommed:HomeRecommend,
      HomeWeekend:HomeWeekend,
  },
    data () {
        return {
            lastCity: '',
            swiperList: [],
            iconList: [],
            recommendList: [],
            weekendList: []
        }
    },
    computed:{
        ...mapState(['city'])
    },
    methods:{
        getHomeInfo(){
            axios.get('/index.json?city='+this.city)
            .then(this.getHomeInfoSucc)
        },
        getHomeInfoSucc(res){
            //console.log(res)
            res=res.data;
            if(res.ret && res.data){
                const data=res.data;
                this.swiperList=data.swiperList;
                this.recommendList=data.recommendList;
                this.weekendList=data.weekendList;
                this.iconList=data.iconList;
            }
        }
   },
    mounted(){
        this.getHomeInfo()
    },
    activated() {
      if(this.city!==this.lastcity){
          this.lastcity=this.city;
          this.getHomeInfo();
      }
    }
}
</script>
